<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center courseList">
        <div class="main-left  " style="position:relative;height: calc(100vh - 82px);">
          <div class="con2" style="padding:30px 20px;">
            <div v-if="tableData.length > 0" @mousewheel="getCatList(categoryId, currentIndex, page+1, filetype)">
              <div class="seach_tag_box">
                <el-tag size="small" type="info" closable class="seach_tag" v-if="queryParamsLabel.kind_item_name"
                  @close="getCatList(categoryId,currentIndex,1,filetype,{class_kind_item_id:undefined},{kind_item_name:undefined})">
                  <span>{{queryParamsLabel.kind_item_name}}</span>
                </el-tag>
                <el-tag size="small" type="info" closable class="seach_tag" v-if="queryParamsLabel.kind_name"
                  @close="getCatList(categoryId,currentIndex,1,filetype,{class_kind_id:undefined},{kind_name:undefined})">
                  <span>{{queryParamsLabel.kind_name}}</span>
                </el-tag>
                <el-tag size="small" type="info" closable class="seach_tag" v-if="queryParamsLabel.ext_name"
                  @close="getCatList(categoryId,currentIndex,1,filetype,{ext_name:undefined},{ext_name:undefined})">
                  <span>{{queryParamsLabel.ext_name}}</span>
                </el-tag>
              </div>
              <el-table :data="tableData"
                :header-cell-style="{ background: '#EEEEEE', color: '#222222',fontSize:'16px' }"
                height='calc(100vh - 180px)'>
                <el-table-column prop="resources_name" label="资源名称" width="320">
                  <template slot-scope="scope">
                    <span class="collection_style" @click="openCollect(scope.row)">{{scope.row.resources_name}}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="kind_item_name" align="center" label="资源合集" width="180">
                  <template slot-scope="scope">
                    <span class="row_font_style"
                      @click="getCatList(categoryId,currentIndex,1,filetype,{class_kind_item_id:scope.row.class_kind_item_id},{kind_item_name:scope.row.kind_item_name})">{{scope.row.kind_item_name}}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="kind_name" align="center" label="资源分类" width="180">
                  <template slot-scope="scope">
                    <span class="row_font_style"
                      @click="getCatList(categoryId,currentIndex,1,filetype,{class_kind_id:scope.row.class_kind_id},{kind_name:scope.row.kind_name})">{{scope.row.kind_name}}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="ext_name" align="center" label="资源类型" width="180">
                  <template slot-scope="scope">
                    <span class="row_font_style"
                      @click="getCatList(categoryId,currentIndex,1,filetype,{ext_name:scope.row.ext_name},{ext_name:scope.row.ext_name})">{{scope.row.ext_name}}</span>
                  </template>
                </el-table-column>

                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <span @click="handleClick(scope.row)" class="collection_style">取消收藏</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-else style="position: relative;height: 700px;" class="t_empty_box">
              <p class="collection_res" style="position:static;margin-top:280px;">无收藏资源</p>
              <br>
              <!-- <p class="resouce-center">进入“<span class="res-style" @click="goCourse">资源中心</span>”，将资源加入收藏，便可引用</p> -->
              <p class="res-style refresh" style="position:static;margin-top:297px;" @click="goBack()">返回</p>
            </div>
            <!-- <div class="page-area mr-20" v-if="tableData.length > 0">
              <span type="button" class="btn-home fl" style="cursor: pointer;"
                @click="getCatList(categoryId, current, 1)">首页</span>
              <el-pagination background layout="prev, pager, next" :current-page="currentPage" :total="total"
                :page-size="1" @current-change="handleCurrentChange"></el-pagination>
              <span type="button" style="cursor: pointer;" class="btn-last fr"
                @click="getCatList(categoryId, current, total)">尾页</span>
            </div> -->
          </div>
        </div>
        <div class="main-right  ">
          <div class="con-menu2" @click="goBack()">
            <div class="menu-img"><img src="static/img/r-back.png" alt="" /></div>
            <div class="menu-item">返回</div>
          </div>
          <!-- <div class="con-menu2" @click="goHome()">
            <div class="menu-img"><img src="static/img/r-home.png" alt="" /></div>
            <div class="menu-item">首页</div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="video-play-dig" v-if="isOpen6 == true" style="position: absolute; z-index: 3;">
      <div class="title">
        <span>分类：{{ kind_item_name }}</span>
        <label class="viewnum2 mr20 " style="margin-left: 600px;">{{ shownum }}</label>
        <label class="collectnum2 mr20 ">{{ collectionnum }}</label>

        <label :class="['collectnum2', 'mr20', 'italic', kind_collection > 0 ? 'cur' : '']"
          @click="collectLi(index, kind_id)" style="cursor: pointer;">
          {{ kind_collection > 0 ? '已收藏' : '收藏' }}
        </label>

        <span class="closed" @click="getClose()"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont">
        <div class="mleft" style="display: flex;">
          <div class="play_area" style="height: 720px;">
            <!-- 视频音频 -->
            <div id="course-player" v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" v-if="getFileType(currentZiyuan.file) == 'video'" style="color: #00FFFF;"></div>
            <template v-else-if="getFileType(currentZiyuan.file) == 'html'">
              <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" style="height:720px;">
                <iframe style="width: 100%;height: 100%;" class="addPad" :src="currentZiyuan.file"
                  @loadstart="isIframeLoad=true" @load="isIframeLoad = false"></iframe>
              </div>
            </template>
            <template v-else-if="getFileType(currentZiyuan.file) == 'radio'">
              <!--  -->
              <div class="item-courseRadio item-play" :style="{ 'background-image': 'url(' + bgImg + ')' }">
                <img v-if="showImg" :class="isPlayMusic ? activeClass : errorClass" src="../../../static/img/music1.png"
                  style="width: 372px;min-height: 372px;" />
                <div class="raad-box" v-else>
                  <div class="item-read" :class="{'no_mask':currentZiyuan.is_mask != 1}">
                    <div v-for="(item, index) in read" :key="index" class="item-all">
                      <span v-if="index < read.length">
                        <span
                          :class="[getCurrent(item,index) ? 'item-color' : '']">{{ item.text }}</span>
                      </span>
                    </div>
                  </div>
                </div>
                <audio @ended="stopMusic()" @pause="stopMusic()" @play="playMusic()" id="audio" class="item-changeAudio"
                  @timeupdate="update" :src="music" controls="controls" controlsList="nodownload">
                  Your browser does not support the audio element.
                </audio>
              </div>

            </template>
            <!-- office文件 -->
            <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" style="height:720px;" v-else-if="
              getFileType(currentZiyuan.file) == 'excel' ||
                getFileType(currentZiyuan.file) == 'word' ||
                getFileType(currentZiyuan.file) == 'pdf' ||
                getFileType(currentZiyuan.file) == 'ppt'
            ">
              <iframe style="background-color: #FFFFFF;" class="course-iframe"
                :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentZiyuan.file" @loadstart="isIframeLoad=true"
                @load="isIframeLoad = false"></iframe>
            </div>
            <!-- 图片 -->
            <div v-else-if="getFileType(currentZiyuan.file) == 'image'">
              <el-carousel indicator-position="outside" :interval="100000" style="height: 720px;"
                v-if="currentZiyuan.file.split(';').length > 1">
                <el-carousel-item v-for="(item, index) in currentZiyuan.file.split(';')" :key="index"><img
                    :src="item" /></el-carousel-item>
              </el-carousel>

              <img :src="currentZiyuan.file" v-if="currentZiyuan.file.split(';').length == 1" />
            </div>
            <template v-else-if="getFileType(currentZiyuan.file) == 'swf'">
              <object :data="currentZiyuan.file" type="application/x-shockwave-flash"
                style="width:970px;height:60%;position: fixed;top: 50%;left: 50%;transform: translate(-60%,-45%);">
                <param name="movie" value="demo.swf" />
                <embed :src="currentZiyuan.file" />
              </object>
            </template>
          </div>
        </div>

        <div class="mright">
          <el-tree ref="tree" :data="itemData" node-key="id" @node-click="handleNodeClick">
            <span slot-scope="{ node, data } " style="position: relative; width: 100%; height: 100%;">
              <span class="el_tree_item_name" style="position: absolute;top: 30%;">{{ data.resources_name }}</span>
              <label :class="['  fr', 'ico-' + getFileType(data.file)]"
                style="position: absolute; right: 0; top: 30%;">&nbsp;</label>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  var player;
  import Header from '../../components/header.vue';
  export default {
    data() {
      return {
        isIframeLoad: true,
        isOpen: true,
        isOpen6: false,
        value: [],
        kind_item_name: '',
        shownum: 0,
        kind_id: 0,
        collectionnum: 0,
        kind_collection: '',
        index: 0,
        input: '',
        list: '',
        all_lesson: '',
        token: '',
        current: -1,
        categoryId: '0',
        zy_id: 0,
        currentPage: 1,
        img_src1: '../../../static/img/arrow_right.png',
        currentIndex: 0,
        total: 0,
        page: 1,
        page_size: 14,
        filetype: '',
        currentZiyuan: {},
        tableData: [],
        itemData: [],
        music: '',
        activeClass: 'playM',
        errorClass: 'stopM',
        isPlayMusic: false,
        currentTxt: 0, //当前歌词所在位置
        array: [], //全部歌词
        indexArray: 0, //监听高亮歌词显示
        read: [], //截取的要显示的歌词
        showImg: true, //没有歌词显示转动图片，
        bgImg: '../../../static/img/music-bg.jpg', //轮播背景图
        bgTimer: '',
        bgAllImg: ['../../../static/img/music-bg.jpg'], //当前播放歌曲轮播的背景图片
        flag: 0, //防止定时器多次执行
        imgNum: 0, //轮播图第几张
        queryParams: {},
        queryParamsLabel: {
          ext_name: '',
          kind_name: '',
          kind_item_name: ''
        }
      };
    },
    beforeDestroy() {
      clearInterval(this.bgTimer); //销毁定时器
      this.bgTimer = null;
    },
    created() {
      this.token = localStorage.getItem('token');
      this.fillter(-1, '');
    },
    watch: {
      //监听时间变化
      currentTxt(newv) {
        // if (newv > 1) {
        //   var ret = this.array.findIndex((value, index, arr) => {
        //     return value.time == newv;
        //   });
        //   if (ret != -1) {
        //     this.indexArray = ret;
        //   }
        // }
        // if (this.indexArray > 6) {
        //   this.read = this.array.slice(this.indexArray - 5, this.indexArray + 13);
        // }
      }
    },
    methods: {
       getCurrent(item, index) {
        if (index < this.read.length-1) {
          return (this.currentTxt > this.read[index].time - 1 && this.currentTxt < this.read[index + 1].time)
        } else if (index == this.read.length-1) {
          return (this.currentTxt > this.read[index].time - 1 && this.currentTxt == this.read[index].time)
        }else{
          return this.currentTxt > this.read[index].time - 1
        }
      },
      //打开弹窗
      openCollect(el) {
        this.currentTxt = 0//当前歌词所在位置
        this.array = [] //全部歌词
        this.indexArray = 0//监听高亮歌词显示
        this.read = [] //截取的要显示的歌词
        this.isIframeLoad = true
        const that = this;
        let formData = {
          token: localStorage.getItem('token'),
          id: el.c_id
        };
        this.$api('ziyuan.setCount', formData);

        this.$api('ziyuan.getZiyuanInfo', {
          id: el.c_id,
          token: localStorage.getItem('token')
        }).then(res => {
          let item = res.data;
          that.collectionnum = item.collectionnum;
          that.shownum = item.shownum;
          that.itemData.push({
            collection: item.collection,
            collectionnum: item.collectionnum,
            ext_name: item.ext_name,
            file: item.file,
            image: item.image,
            lyric_text: item.lyric_text,
            lyric: item.lyric,
            shownum: item.shownum,
            rotation_times: item.rotation_times,
            resources_name: item.resources_name,
            desc: item.desc,
            download_num: item.download_num,
            id: item.id,
            res_type: item.res_type,
            kind_item_id_class: item.kind_item_id_class,
            kind_item_id_course: item.kind_item_id_course,
            rotation_img: item.rotation_img,
            rotation_img_text: item.rotation_img_text,
            status: item.status,
            weigh: item.weigh
          })
          this.$forceUpdate()
          that.kind_item_name = el.kind_name;
          that.kind_id = item.c_id;
          that.isOpen6 = true;
          that.playLi(0, that.itemData[0]);
          that.$nextTick(() => {
            that.$refs.tree.setCurrentKey(that.itemData[0].id)
          })
        });

      },
      //取消收藏
      handleClick(index) {
        this.$api('ziyuan.addCollection', {
          id: index.c_id,
          token: localStorage.getItem('token')
        }).then(res => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.fillter(-1, '');
            if (index.collection === 0) {
              index.collection = 1
            } else {
              index.collection = 0;
            }
          } else {
            this.$message.error(res.message)
          }
        });
      },
      getClose() {
        this.isOpen6 = false;
        clearInterval(this.bgTimer);
        this.bgTimer = null
        this.flag = 0;
        this.itemData = [];
      },
      playMusic() {
        this.isPlayMusic = true;
      },
      stopMusic() {
        this.isPlayMusic = false;
      },

      fillter(index, type) {
        this.filetype = type;
        this.getCatList(this.categoryId, this.currentIndex, 1, type);
      },
      getCatList(id, index, page = 1, type, item = {}, queryLabel = {}) {
        // if (page == 1) {
        //   this.currentPage = 1;
        // } else if (page == this.total) {
        //   this.currentPage = this.total;
        // }
        this.currentIndex = index;
        this.categoryId = id;
        this.page = page;
        this.queryParams = Object.assign(this.queryParams, item)
        this.queryParamsLabel = Object.assign(this.queryParamsLabel, queryLabel)
        let all_form = {
          page: this.page,
          limit: 18,
          filetype: this.filetype,
          id: this.categoryId2,
        };
        all_form = Object.assign(all_form, this.queryParams)
        this.$api('ziyuan.getMyZiyuanList', all_form).then(res => {
          if (page == 1) {
            this.tableData = res.data.data;
          } else {
            this.tableData = this.tableData.concat(res.data.data);
          }

          this.total = res.data.last_page;
        });
      },
      handleCurrentChange(e) {
        this.currentPage = e;
        this.getCatList(this.categoryId, this.currentIndex, e, this.filetype);
      },

      playLi(i, item) {
        var audio = document.querySelector('audio');
        if (audio != null) {
          audio.currentTime = 0;
        }
        this.indexArray = 0;
        this.currentTxt = 0;
        this.zy_id = item.id;
        this.currentZiyuan = item;
        this.isPlayMusic = false;
        clearInterval(this.bgTimer);
        this.bgTimer = null
        this.flag = 0;
        this.imgNum = 1
        if (this.getFileType(this.currentZiyuan.file) == 'video') {
          this.aliplay(this.currentZiyuan.file);
        } else if (this.getFileType(this.currentZiyuan.file) == 'radio') {

          this.music = this.currentZiyuan.file;
        }
        //是否有歌词，有歌词进行处理
        if (item.lyric_text && item.lyric_text.trim() != '') {
          this.array = [];
          this.showImg = false;
          let lyricArr = item.lyric_text.split('[').slice(1); // 先以[进行分割
          let lrcObj = {};
          lyricArr.forEach(item => {
            var data = {};
            let arr = item.split(']'); // 再分割右括号
            // 时间换算成秒
            let m = parseInt(arr[0].split(':')[0]);
            let s = parseInt(arr[0].split(':')[1]);
            arr[0] = m * 60 + s;
            data.time = arr[0];
            if (arr[1] != '\n') {
              // 去除歌词中的换行符
              lrcObj[arr[0]] = arr[1];
              data.text = arr[1];
            }
            this.array.push(data);
          });
          this.read = this.array.slice(0, this.indexArray + 13);
        } else {
          this.showImg = true;
        }
        if (item.rotation_img_text && item.rotation_img_text.length) {
          this.bgAllImg = item.rotation_img_text;
          this.bgImg = this.bgAllImg[0];
          this.showImg = false;
        } else {
          this.bgImg = '../../../static/img/music-bg.jpg';
          this.bgAllImg = [];
          clearInterval(this.bgTimer);
          this.flag = 0;
        }
        if (this.flag == 1) {
          return;
        }
        if (this.bgAllImg.length > 1) {
          this.bgTimer = setInterval(() => {
            this.flag = 1;
            this.bgImg = this.bgAllImg[this.imgNum];
            if (this.imgNum == this.bgAllImg.length - 1) {
              this.imgNum = -1;
            }
            this.imgNum++;
          }, 10000);
        } else {
          clearInterval(this.bgTimer);
        }
      },
      // 阿里云视频播放
      aliplay(file) {
        this.isIframeLoad = true
        const saveTime = function (memoryVideo, currentTime) {
          localStorage.setItem(memoryVideo, currentTime);
        };

        const getTime = function (memoryVideo) {
          return localStorage.getItem(memoryVideo);
        };
        this.$nextTick(() => {
          player = new Aliplayer({
              id: 'course-player',
              source: file,
              width: '100%',
              height: '720px',
              autoplay: true,
              isLive: false,
              components: [{
                name: 'MemoryPlayComponent',
                type: AliPlayerComponent.MemoryPlayComponent,
                args: [false, getTime, saveTime]
              }],
              skinLayout: [{
                  name: 'controlBar',
                  align: 'blabs',
                  x: 0,
                  y: 0,
                  children: [{
                    name: 'progress',
                    align: 'blabs',
                    x: 0,
                    y: 44
                  },
                  {
                    name: 'playButton',
                    align: 'tl',
                    x: 15,
                    y: 12
                  },
                  {
                    name: 'timeDisplay',
                    align: 'tl',
                    x: 10,
                    y: 7
                  },
                  {
                    name: 'fullScreenButton',
                    align: 'tr',
                    x: 10,
                    y: 12
                  },
                  {
                    name: 'volume',
                    align: 'tr',
                    x: 5,
                    y: 10
                  }
                  ]
                }]
            },
            function (player) {
              //console.log('The player is created');
            }
          );
           player.on('ready',()=>{
            this.isIframeLoad = false
            // //console.log('加载成功')
          })
        });
      },
      //获取当前音频播放时间
      update() {
        var audio = document.querySelector('audio');
        if (audio != null) {
          this.currentTxt = parseInt(audio.currentTime);
          this.array.forEach((element, index) => {
            if (index < this.array.length - 1) {
              if (this.currentTxt > this.array[index].time - 1 && this.currentTxt < this.array[index + 1].time) {
                this.indexArray = index
              }
            }
          });
          if (this.indexArray > 6) {
            this.read = this.array.slice(this.indexArray - 5, this.indexArray + 13);
          } else {
            this.read = this.array.slice(0, this.indexArray + 13)
          }
        }
      },
      handleNodeClick(item) {
        this.playLi(0, item);
      },
      getFileType(fileName) {
        // 后缀获取
        let suffix = '';
        // 获取类型结果
        let result = '';
        try {
          const flieArr = fileName.split('.');
          suffix = flieArr[flieArr.length - 1];
        } catch (err) {
          suffix = '';
        }
        // fileName无后缀返回 false
        if (!suffix) {
          return false;
        }
        suffix = suffix.toLocaleLowerCase();
        // 图片格式
        const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
        // 进行图片匹配
        result = imglist.find(item => item === suffix);
        if (result) {
          return 'image';
        }
        // 匹配txt
        const txtlist = ['txt'];
        result = txtlist.find(item => item === suffix);
        if (result) {
          return 'txt';
        }
        // 匹配 excel
        const excelist = ['xls', 'xlsx'];
        result = excelist.find(item => item === suffix);
        if (result) {
          return 'excel';
        }
        // 匹配 word
        const wordlist = ['doc', 'docx'];
        result = wordlist.find(item => item === suffix);
        if (result) {
          return 'word';
        }
        // 匹配 pdf
        const pdflist = ['pdf'];
        result = pdflist.find(item => item === suffix);
        if (result) {
          return 'pdf';
        }
        // 匹配 ppt
        const pptlist = ['ppt', 'pptx'];
        result = pptlist.find(item => item === suffix);
        if (result) {
          return 'ppt';
        }
        // 匹配 视频
        const videolist = [
          '3gp',
          'asf',
          'avi',
          'dat',
          'dv',
          'flv',
          'f4v',
          'gif',
          'm2t',
          'm3u8',
          'm4v',
          'mj2',
          'mjepg',
          'mkv',
          'mov',
          'mp4',
          'mpe',
          'mpg',
          'mpeg',
          'mts',
          'ogg',
          'qt',
          'rm',
          'rmab',
          'ts',
          'vob',
          'wmv',
          'webm'
        ];
        result = videolist.find(item => item === suffix);
        if (result) {
          return 'video';
        }
        // 匹配 音频
        const radiolist = ['aac', 'ac3', 'acm', 'amr', 'ape', 'caf', 'flac', 'm4a', 'mp3', 'ra', 'wav', 'wma'];
        result = radiolist.find(item => item === suffix);
        if (result) {
          return 'radio';
        }
        // 匹配 swf
        const swflist = ['swf'];
        result = swflist.find(item => item === suffix);
        if (result) {
          return 'swf';
        }
        //匹配html
        const htmllist = ['html'];
        result = htmllist.find(item => item === suffix);
        if (result) {
          return 'html';
        }
        // 其他 文件类型
        return 'other';
      },
      collectLi(index, id) {
        this.$api('ziyuan.addCollection', {
          id: id
        }).then(res => {
          if (this.collectionnum == 1) {
            this.collectionnum = 0;
            this.kind_collection = 1;
          } else if (this.collectionnum == 0) {
            this.collectionnum = 1;
            this.kind_collection = 0;
          }
          this.$message.success(res.msg);
          this.handleCurrentChange(1);
        });
      },
      goCourse() {
        this.$router.replace('/courseList');
      },
      //刷新
      refresh() {
        this.fillter(-1, '');
      },
      goBack() {
        this.$router.go(-1);
      },
      goHome() {
        this.$router.push(localStorage.getItem('jump_path'));
        //this.$router.push('/index');
      }
    },
    components: {
      Header
    }
  };

</script>

<style lang="scss" scoped>
  /deep/ .el-input__inner {
    height: 36px;
    line-height: 35px;
    outline: 0;
  }

  @keyframes rot {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .stopM {
    animation: rot 2s linear infinite;
    animation-play-state: paused;
  }

  .playM {
    animation: rot 2s linear infinite;
    animation-play-state: running;
  }

  .item-bg {
    background: no-repeat;
    background-size: cover;
  }

  .item-read {
    text-align: center;
    // height: 80%;
    padding-top: 3%;
    overflow: hidden;
  }

  .item-all {
    padding: 15px;
    font-size: 18px;
  }

  .item-color {
    color: #fff;
    font-size: 26px;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node__content {
    // width: 200px;
    height: 43px;
    margin: 1px 0;
  }

  .el-tree /deep/ .is-current>.el-tree-node__content {
    background: #C9FFEF !important;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 0px;
    color: #222222;
  }

  .el-tree /deep/ .el-tree-node__label {
    display: inline-block;
    width: 72%;
  }

  .el-tree /deep/ .el-tree-node__children .el-tree-node__content {
    width: 200px;
    height: 34px;
    font-size: 16px;
    font-family: PingFang SC;
    // font-weight: bold;
    line-height: 0px;
    // color: #222222;
  }

  .el-tree /deep/ .el-tree-node__children .is-current .el-tree-node__content {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 0px;
    color: #222222;
  }

  .el-tree /deep/ .el-tree-node__children .el-tree-node__content {
    font-size: 16px;
    font-family: PingFang SC;
    // font-weight: bold;
    line-height: 0px;
    // color: #222222;
  }

  .el-tree /deep/ .el_tree_item_name {
    width: 160px;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

  }

  .el-tree /deep/ .is-current .el_tree_item_name {
    padding-top: 10px;
  }

  .el-tree /deep/ .el-tree-node__children .el_tree_item_name {
    width: 120px;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 8px;

  }


  .el-tree .el-tree-node__expand-icon {
    color: #fff !important;
  }

  .el-tree-node__expand-icon.is-leaf {
    color: transparent !important;
  }

  .row_font_style {
    width: 48px;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 0px;
    color: #3688E9;
    opacity: 1;
    cursor: pointer;
  }

  .t_empty_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .seach_tag_box {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }

  .seach_tag {
    margin-left: 12px;
    display: flex;
    align-items: center;

  }

  .seach_tag>span {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }

  .seach_tag /deep/ .el-tag__close {
    margin-top: 4px;
  }

  .page-area {
    position: absolute;
    right: 10px;
    bottom: 20px;
  }

  .con2 /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(240, 240, 240, 0);
    opacity: 0;
  }

  .con2 /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  }

  .con2 /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
    border-radius: 10px;
  }

  .con2 /deep/ .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: rgba(66, 55, 55, 0);
  }

  .item-courseRadio .item-read {
    position: inherit;
    height: 85%;
    padding-bottom: 3%;
    width: 70%;
    border-radius: 12px;
  }

</style>
